/**
 * Created by bianbian3 on 2018/8/29.
 */
/**
 * Created by bianbian3 on 2018/8/29.
 */

import React, { Component, PropTypes } from 'react';
import { View, StyleSheet, TouchableHighlight, Dimensions, Text, TouchableOpacity, Image, Slider } from 'react-native';
import { MtChar, MtCheckItem, MtColor } from 'martian-ui';
const { MtM1, MtT3 } = MtChar;
import { Switch } from 'react-native-switch';
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan';
const { width, height } = Dimensions.get('window');
import { BoxShadow } from 'react-native-shadow'
class TwoLabelBarAndSlider extends Component {
	constructor(props) {
		super(props)
		this.state = {
			roomTemperature: 0,
			temperature: 0,
      value: props.value && parseInt(props.value, 10 ) || 0,
		}
	}
	_onModelPressButton() {

	}
	render() {
		const { firstLineTitle, secondLineTitle, barWidth,barHeight, containerStyle, minimumValue, maximumValue, chooseValue, firstLineValue, secondlineValue } = this.props;
    console.warn('secondlineValuesecondlineValue' + secondlineValue);
		return (
			<View style={[{flex: 1, alignItems:'center'}, containerStyle]}>
				<BoxShadowYaGuan

					width={barWidth}
					height={barHeight}
					renderItem={()=>{
						return (
							<View style={styles.settings}>
								<View style={[styles.flex, styles.temperature]}>
									<Text style={styles.temperatureTitle}>{firstLineTitle}</Text>
									<Text style={styles.temperatureText}>
										{firstLineValue || '暂无'}
										<Text style={{fontSize: 12}}>℃</Text>
									</Text>
								</View>
								<View style={[styles.flex, styles.temperature]}>
									<Text style={styles.temperatureTitle}>{secondLineTitle}</Text>
									<Text style={styles.temperatureText}>
										{secondlineValue || this.state.value || '请设置'}
										<Text style={{fontSize: 12}}>℃</Text>
									</Text>
								</View>
								<View style={styles.sliderView}>
									<TouchableOpacity onPress = {this._onModelPressButton.bind(this)} >
										<Image source={require('../../img/btn_down.png')}></Image>
									</TouchableOpacity>
									<View style={styles.slider}>
										<Slider
											minimumValue = {minimumValue}
											maximumValue = {maximumValue}
                      value={secondlineValue || this.state.value}
											onValueChange = {
												(value) => {
												}
											}
											onSlidingComplete = {
												(value) => {
													this.setState(() => ({value:parseInt(value, 10)}));
                          chooseValue(value)
												}
											}
										/>
									</View>
									<TouchableOpacity onPress = {this._onModelPressButton.bind(this)} >
										<Image source={require('../../img/btn_up.png')}></Image>
									</TouchableOpacity>
								</View>
							</View>
						)
					}}
				/>
			</View>

		);
	}
}

const styles = StyleSheet.create({
	contentContainer: {

	},
	container: {
		alignItems: 'center',
		justifyContent: 'center',
		flex: 1,
		backgroundColor: 'whitesmoke'
	},
	flex: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingLeft: 20,
		paddingRight: 20,
	},
	power: {
		height: 68,
		width: width - 30,
		backgroundColor: '#fff',
		borderRadius: 6,
	},
	powerText: {
		fontSize: 14,
		fontWeight: 'bold',
		color: '#333333',
	},
	powerSwitch: {
	},
	temperature: {
		marginTop: 20,
	},
	temperatureTitle: {
		color: '#333333',
		fontSize: 13
	},
	temperatureText: {
		color: '#444444',
		fontSize: 24
	},
	sliderView: {
		marginTop: 25,
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 20,
		paddingRight: 20,
	},
	slider: {
		flex: 1,
	},
	settings: {
		height: 194,
		width: width - 30,
		borderRadius: 6,
		backgroundColor: '#fff',
	},
	modelView: {
		marginTop: 30,
		width: width - 30,
	},
	modelTitle: {
		textAlign: 'left',
		color: '#333333',
		fontWeight: 'bold',
	},
	modelList: {
		paddingBottom: 10
	},
	modelItem: {
		width: 76,
		height: 76,
		backgroundColor: '#fff',
		borderRadius: 6,
		justifyContent: 'center',
		alignItems: 'center',
	},
	modelText: {
		color: '#333333',
		fontSize: 11,
		marginTop: 5,
	},
	windSpeedView: {
		height: 154,
		width: width - 30,
		borderRadius: 6,
		backgroundColor: '#fff',
	},
	windSpeedTitle: {
		marginTop: 24,
		marginLeft: 20,
	},
	windSpeedContent: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 22,
		paddingRight: 22,
		marginTop: 32,
		position: 'relative',
	},
	windSpeedItem: {
		width: 24,
	},
	weedItem: {
		alignItems: 'center',
		zIndex: 10,
	},
	round: {
		width: 14,
		height: 14,
		backgroundColor: '#EAEAEA',
		borderRadius: 7,
		marginTop: 10,
	},
	lineView: {
		position: 'absolute',
		justifyContent: 'center',
		alignItems: 'center',
		left: 0,
	},
	line: {
		width: width - 98,
		height: 4,
		backgroundColor: '#EAEAEA',
		position: 'absolute',
		left: 34,
		top: 109,
	},
	reservationView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	reservationText: {
		color: '#777777',
		fontSize: 12,
		marginRight: 16,
	},
	transform: {
		transform: [{rotate: '180deg'}]
	}
})

module.exports = TwoLabelBarAndSlider;
